import React, {useContext, useEffect, useState} from "react";
import {
    Dimensions,
    ImageBackground,
    RefreshControl,
    ScrollView,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from "react-native";
import LocaleContext from "../libs/locale";
import WalletContext from "../libs/wallet";
const {width, height,scale} = Dimensions.get("window");

import {Icon} from "react-native-elements";

import SmallBG from '../assets/redEnvelopeList/smallRed.png';
import {MyRedEnvelope} from "../libs/nodes";
import {formartMoney, toDecimal2} from "../libs/helpers";
import AsyncStorage from "@react-native-async-storage/async-storage";

const RedEnvelopeList = ({navigation}:any)=>{
    const locale:any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const [selectSection,setSelectSection] = useState(true);

    const [getTotal,setGetTotal] = useState("0.00");
    const [sendTotal,setSendTotal] = useState("0.00");
    const [getNumber,setGetNumber] = useState("0");
    const [sendNumber,setSendNumber] = useState("0");
    const [year,setYear] = useState("2021");
    const [getInfoList,setGetInfoList]:any = useState([]);
    const [sendInfoList,setSendInfoList]:any = useState([]);
    const [lang,setLang] = useState(true);//true 代表中文 false 代表英文
    const [refresh, setRefresh] = useState(true);



    useEffect(()=>{
        const work = async () => {
            if(!refresh)
            {
                return ;
            }
            var res = await MyRedEnvelope(wallet.address);
            var getList = [];
            var sendList = [];
            for(var i=0;i<res.myPkgList.length;i++)
            {
                //发送的红包
                if(res.myPkgList[i].nonce=="0")
                {
                    sendList.push(res.myPkgList[i]);
                }
                //收到的红包
                else
                {
                    console.log(res.myPkgList[i].nickname)
                    getList.push(res.myPkgList[i]);
                }
            }
            setGetInfoList(getList);
            setSendInfoList(sendList);
            setGetTotal((parseInt(res.dict.recvtotal)/100).toString());
            setSendTotal((parseInt(res.dict.sendtotal)/100).toString());
            setGetNumber(parseInt(res.dict.recvcount).toString());
            setSendNumber(parseInt(res.dict.sendcount).toString());
            setRefresh(false);
        }
        work();
    },[refresh])
    useEffect(()=>{
        const work  = async () => {
            var lang = await AsyncStorage.getItem('@lang');
            if(lang=='zh')
            {
                setLang(true);
            }
            else
            {
                setLang(false);
            }
        }
        work();
    },[])



    return(
        <View style={{flex:1}}>
            <View style={{height:0.07*height,backgroundColor:"#fa331c"}} />
            <View style={{width:width,height:0.06*height,backgroundColor:"#fff",flexDirection:"row"}}>
                <TouchableOpacity onPress={()=>{setSelectSection(true)}} style={{flex:1,backgroundColor:"#fff",alignItems:"center",justifyContent:"flex-end"}}>
                        {
                            selectSection?
                                <Text style={{backgroundColor:"#fff",fontSize:(width/360)*17,color:"#d46a68",borderBottomWidth:5/scale,borderBottomColor:"#d46a68",paddingBottom:(0.03*height-(width/360*18/2))/1.5}}>{locale._("RedEnvelopeList.Received")}</Text>
                                :
                                <Text style={{fontSize:(width/360)*17,color:"#000",borderBottomWidth:5/scale,borderBottomColor:"#fff",paddingBottom:(0.03*height-(width/360*18/2))/1.5}}>{locale._("RedEnvelopeList.Received")}</Text>
                        }
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{setSelectSection(false)}} style={{flex:1,backgroundColor:"#fff",alignItems:"center",justifyContent:"flex-end"}}>
                        {
                            !selectSection?
                                <Text style={{backgroundColor:"#fff",fontSize:(width/360)*17,color:"#d46a68",borderBottomWidth:5/scale,borderBottomColor:"#d46a68",paddingBottom:(0.03*height-(width/360*18/2))/1.5}}>{locale._("RedEnvelopeList.Send")}</Text>
                                :
                                <Text style={{fontSize:(width/360)*17,color:"#000",borderBottomWidth:5/scale,borderBottomColor:"#fff",paddingBottom:(0.03*height-(width/360*18/2))/1.5}}>{locale._("RedEnvelopeList.Send")}</Text>
                        }
                </TouchableOpacity>
            </View>
            <View style={{flex:1,backgroundColor:"#fcf9f2"}}>
                <View style={{width:width,height:0.09*height,backgroundColor:"#fcf9f2",flexDirection:"column"}}>
                    <Text style={{fontSize:(width/360)*17,color:"#9f9b9a",marginLeft:0.77*width,marginTop:0.08*height*0.4}}>
                        {year}{locale._("RedEnvelopeList.Year")}
                    </Text>
                    <Icon style={{alignSelf:"flex-end",marginRight:0.13*width,marginTop:-(width/360)*5}} size={(width/360)*20} type='font-awesome' name='angle-down' color={"#9f9b9a"}/>
                </View>
                <View style={{width:width,height:0.16*height-25,backgroundColor:"#fcf9f2"}}>
                    {
                        selectSection?
                        <Text style={{textAlign:"center",fontSize:(width/360)*15,marginTop:0.16*height*0.05}}>
                            {getNumber} {locale._("RedEnvelopeList.ReceivedAll")}
                        </Text>
                        :
                        <Text style={{textAlign:"center",fontSize:(width/360)*15,marginTop:0.16*height*0.05}}>
                            {sendNumber} {locale._("RedEnvelopeList.SendAll")}
                        </Text>
                    }

                    <View style={{flexDirection:"row",justifyContent:"center",marginTop:0.16*height*0.05}}>
                        <Text style={{textAlignVertical:"bottom",color:"#f83217",fontSize:(width/360)*30,fontWeight:"bold",includeFontPadding:false}}>
                            {selectSection?toDecimal2(formartMoney(getTotal,2))+" ":toDecimal2(formartMoney(sendTotal,2))+" "}
                        </Text>
                        <Text style={{textAlignVertical:"bottom",fontSize:(width/360)*14,paddingBottom:(width/360)*14*0.25}}>
                            SAT
                        </Text>
                    </View>
                </View>
                <Text style={{fontSize:14,height:20,marginLeft:width*0.03,marginBottom:5}}>{locale._('RedEnvelopeList.Show50')}</Text>
                <ScrollView refreshControl={
                    <RefreshControl refreshing={false} onRefresh={() => setRefresh(true)} collapsable={true}/>
                }>
                    <View style={{flex:1}}>
                        {
                            selectSection?
                                getInfoList.map((item:any,index:any)=>(
                                    <TouchableOpacity key={index} onPress={()=>{navigation.navigate('RedEnvelopeInfo', { pkgid: item.pkgid});}}>
                                        <View style={{height:0.10*height,backgroundColor:"#fff",borderBottomWidth:5/scale,borderBottomColor:"#f1f1f1",flexDirection:"row"}}>
                                            <ImageBackground source={SmallBG} style={{height:0.1*height*0.8,width:width*0.13,alignSelf:"center",marginLeft:width*0.03}}/>
                                            <View style={{flexDirection:"column",width:width*0.55}}>
                                                <Text style={{fontSize:lang?(width/360)*15:(width/360)*13,fontWeight:"bold",paddingLeft:width*0.04,marginTop:0.1*height*0.15}}>
                                                    {locale._("RedEnvelopeList.Type")}丨{toDecimal2((parseFloat(item.total)/100).toString())}{(item.type==null || item.type=="")?"":"丨"+item.coinname}
                                                </Text>
                                                <View style={{flex:1,justifyContent:"flex-end"}}>
                                                    {
                                                            <Text style={{fontSize:(width/360)*12,paddingLeft:width*0.04,includeFontPadding:false,textAlignVertical:"bottom",marginBottom:0.1*height*0.15}}>
                                                                {locale._("RedEnvelopeList.From")} {item.nickname!==""?item.nickname:(item.sender.slice(0,5)+"..."+item.sender.slice(-5))} {item.time.slice(5,10)}
                                                            </Text>
                                                    }
                                                </View>
                                            </View>
                                            <View style={{flexDirection:"column",flex:1}}>
                                                <Text style={{alignSelf:"flex-end",marginRight:width*0.04,fontSize:(width/360)*15,fontWeight:"bold",paddingLeft:width*0.04,marginTop:0.1*height*0.15}}>
                                                    {toDecimal2((parseFloat(item.remain)/100).toString())}
                                                </Text>
                                                <View style={{flex:1,justifyContent:"flex-end"}}>
                                                    <Text style={{alignSelf:"flex-end",marginRight:width*0.04,fontSize:(width/360)*12,paddingLeft:width*0.04,includeFontPadding:false,textAlignVertical:"bottom",marginBottom:0.1*height*0.15}}>
                                                        {
                                                            item.status!=="2"?
                                                            locale._("RedEnvelopeList.Waiting")
                                                                :
                                                            locale._("RedEnvelopeList.Success")
                                                        }
                                                    </Text>
                                                </View>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                ))
                                :
                                sendInfoList.map((item:any,index:any)=>(
                                    <TouchableOpacity key={index} onPress={()=>{navigation.navigate('RedEnvelopeInfo', { pkgid: item.pkgid});}}>
                                        <View style={{height:0.10*height,backgroundColor:"#fff",borderBottomWidth:5/scale,borderBottomColor:"#f1f1f1",flexDirection:"row"}}>
                                        <ImageBackground source={SmallBG} style={{height:0.1*height*0.8,width:width*0.13,alignSelf:"center",marginLeft:width*0.03}}/>
                                        <View style={{flexDirection:"column",width:width*0.55}}>
                                            <Text style={{fontSize:lang?(width/360)*15:(width/360)*13,fontWeight:"bold",paddingLeft:width*0.04,marginTop:0.1*height*0.15}}>
                                                {locale._("RedEnvelopeList.Type")}丨{toDecimal2((parseFloat(item.total)/100).toString())}{(item.type==null || item.type=="")?"":"丨"+item.coinname}
                                            </Text>
                                            <View style={{flex:1,justifyContent:"flex-end"}}>
                                                {
                                                    <Text style={{fontSize:(width/360)*12,paddingLeft:width*0.04,includeFontPadding:false,textAlignVertical:"bottom",marginBottom:0.1*height*0.15}}>
                                                        {locale._("RedEnvelopeList.Contains")} {item.number} {locale._("RedEnvelopeList.RedEnvelopes")} {item.time.slice(5,10)}
                                                    </Text>
                                                }
                                            </View>
                                        </View>
                                        <View style={{flexDirection:"column",flex:1}}>
                                            <Text style={{alignSelf:"flex-end",marginRight:width*0.04,fontSize:(width/360)*15,fontWeight:"bold",paddingLeft:width*0.04,marginTop:0.1*height*0.15}}>
                                                {toDecimal2((parseFloat(item.total)/100).toString())}
                                            </Text>
                                            <View style={{flex:1,justifyContent:"flex-end"}}>
                                                <Text style={{alignSelf:"flex-end",marginRight:width*0.04,fontSize:(width/360)*12,paddingLeft:width*0.04,includeFontPadding:false,textAlignVertical:"bottom",marginBottom:0.1*height*0.15}}>
                                                    {locale._("RedEnvelopeList.SuccessSend")}
                                                </Text>
                                            </View>
                                        </View>
                                    </View>
                                    </TouchableOpacity>
                                ))
                        }
                    </View>
                </ScrollView>

            </View>


        </View>
    );
}
export  default RedEnvelopeList;
